<template>
  <NuxtLayout name="user" menuActive="3">
    <div class="class_box">
      <el-table :data="tableInfo" show-overflow-tooltip>
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.courses" border show-overflow-tooltip>
              <el-table-column label="课程标题">
                <template #default="scope">
                  <a class="blue" :href="`/curriculum_details/${scope.row.id}.html`">{{ scope.row.title }}</a>
                </template>
              </el-table-column>
              <el-table-column prop="teacher.name" label="讲师" width="80" />
              <el-table-column prop="totalHours" label="总学时" width="80" />
              <el-table-column prop="dayOfHours" label="每日最多学时" width="110" />
              <el-table-column prop="userDayOfHours" label="今日已获学时" width="110" />
              <el-table-column prop="amount" label="金额" width="70" />
              <el-table-column label="推荐星级" width="150">
                <template #default="scope">
                  <el-rate v-model="scope.row.starLevel" disabled />
                </template>
              </el-table-column>
              <el-table-column prop="scoreLevel" label="评分" width="60" />
              <el-table-column label="封面图" width="130">
                <template #default="scope">
                  <el-image v-show="scope.row.imgs" :src="scope.row.imgs && scope.row.imgs.length > 0 ? scope.row.imgs[0] : ''"
                    :preview-src-list="scope.row.imgs ? scope.row.imgs : []" fit="cover" preview-teleported
                    style="width: 100px;height: 100px;"></el-image>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="serialNo" label="班级编号" />
        <el-table-column prop="name" label="班级名称" />
        <el-table-column prop="subject.name" label="所属科目" />
        <el-table-column prop="teacher.name" label="老师" width="80" />
        <el-table-column prop="userCount" label="班级人数" width="80" />
        <el-table-column prop="maxCount" label="学员上限" width="80" />
        <el-table-column prop="issue" label="开班日期" />
        <el-table-column label="封面图" width="130">
          <template #default="props">
            <el-image v-show="props.row.imgs" :src="props.row.imgs" :preview-src-list="[props.row.imgs]" fit="cover" preview-teleported
              style="width: 100px;height: 100px;"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="报名时间" />
        <el-table-column prop="endTime" label="截至时间" />
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button type="success" size="small" @click="editFn(scope.row)">资料</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page_box">
        <el-pagination background @current-change="handleCurrentChange" v-model:current-page="page.pi" :page-size="page.ps" layout="prev, pager, next, total" :total="totalNum"></el-pagination>
      </div>
    </div>
    <MyForm :visible="formVisible" :forms="forms" :title="formTitle" @pick="formPickFn" />
  </NuxtLayout>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getClassesApi, getClassesUserInfo, updateClassesUserInfo } from '~/server/api'
import MyForm from './form'
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_班级信息",
  keywords: "技考邦,班级信息",
  description: "技考邦，班级信息。",
  ogTitle: "技考邦_班级信息",
  ogDescription: "技考邦，班级信息。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});

const tableInfo = ref([])
const totalNum = ref(0)
const router = useRouter()
const route = useRoute()
const page = reactive({
  pi: 1,
  ps: 5
})
const getQueryInfo = () => {
  const { pi } = route.query
  return {
    pi: pi || 1,
  }
}
const handleCurrentChange = (val) => {
  const temp = getQueryInfo()
  temp.pi = val
  router.push({
    path: '/userCenter/ClassInfo',
    query: temp
  })
  getClasses()
}
const getClasses = async () => {
  await useServerRequest(getClassesApi, {
    method: 'post',
    body: JSON.stringify({
      pageNum: page.pi,
      pageSize: page.ps,
    })
  }).then(res => {
    if (res.errno === 0) {
      totalNum.value = res.result.total
      tableInfo.value = res.result.list
    }
  })
}
// 资料
const forms = ref({})
const formVisible = ref(false)
const formTitle = ref('')
async function editFn(val) {
  let res = await useServerRequest(getClassesUserInfo, {
    method: 'get',
    params: {
      classesId: val.id
    }
  })
  if (res && res.errno === 0 && res.result) {
    forms.value.id = res.result.id;
    forms.value.name = res.result.name;
    forms.value.phoneNo = res.result.phoneNo;
    forms.value.classesId = res.result.classesId;
    forms.value.userId = res.result.userId;
    forms.value.idFrontImg = res.result.idFrontImg;
    forms.value.idFrontImgStatus = res.result.idFrontImgStatus;
    forms.value.idBackImg = res.result.idBackImg;
    forms.value.idBackImgStatus = res.result.idBackImgStatus;
    forms.value.medicalCert = res.result.medicalCert;
    forms.value.medicalCertStatus = res.result.medicalCertStatus;
    forms.value.diplomaCert = res.result.diplomaCert;
    forms.value.diplomaCertStatus = res.result.diplomaCertStatus;
    forms.value.headShot = res.result.headShot;
    forms.value.headShotStatus = res.result.headShotStatus;
  }
  formTitle.value = '资料信息';
  formVisible.value = true;
}
// 取消 确认
const formPickFn = async (e) => {
  if (e.form) {
    let classRes = await useServerRequest(updateClassesUserInfo, {
      method: 'post',
      body: JSON.stringify(e.form)
    })
    if (classRes.errno === 0) {
      ElMessage.success('保存成功')
      formVisible.value = e.visible;
    }
    return false;
  }
  formVisible.value = e.visible;
}
onMounted(() => {
  getClasses()
})
</script>

<style lang="less" scoped>
.class_box {
  padding: 30px;

  .blue {
    color: #2c6eff;
  }
}

.class_item {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;

  &:first-child {
    margin-top: 0;
  }

  >.photo_box {
    width: 180px;
    height: 160px;
    // background-color: pink;
    border: 1px solid #ccc;
    // border-right: none;
    display: flex;
    justify-content: center;
    align-items: center;

    >img {
      width: 160px;
      height: 120px;
    }
  }
}

table,
tr,
td {
  border-collapse: collapse;
  font-size: 14px;
}

tr {
  display: flex;
  height: 40px;
}

td {
  border: 1px solid #ccc;
  border-left: none;
  border-bottom: none;
  padding: 0;
  text-align: center;
  ;

  &.head {
    font-weight: bold;
    width: 110px;
  }

  &.con {
    width: 232px;
  }
}

.tit_box {
  width: 180px;
  height: 40px !important;
  line-height: 40px;
  font-size: 14px;
  font-weight: bold;
  border-top: none;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.title_box {
  width: 228px;
  height: 40px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  cursor: pointer;

  &:hover {
    color: #2c6eff;
  }
}

.page_box {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
}
</style>